<template>
  <div>
    <el-table :data="orderList" border style="width: 100%">
      <el-table-column prop="order.createDate" label="下单日期"> </el-table-column>
      <el-table-column prop="order.address" label="收货地址"> </el-table-column>
      <el-table-column label="总价">
        <template slot-scope="scope"> ¥{{ scope.row.total }} </template>
      </el-table-column>
      <el-table-column fixed="right" prop="order.address" label="订单状态" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.order.status === 0">待支付</el-tag>
          <el-tag v-else-if="scope.row.order.status === 1">待收货</el-tag>
          <el-tag v-else>完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-popover placement="right" width="880" trigger="click">
            <el-table :data="scope.row.list">
              <el-table-column label="图片">
                <template slot-scope="item">
                  <el-image
                    :src="item.row.pic"
                    style="height: 80px; width: 80px"
                    fit="fill"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column property="goodName" label="品名"></el-table-column>
              <el-table-column property="goodCount" label="数量"></el-table-column>
              <el-table-column label="单价">
                <template slot-scope="item"> ¥ {{ item.row.goodPrice }} </template>
              </el-table-column>
              <el-table-column label="合价">
                <template slot-scope="item">
                  ¥ {{ item.row.goodPrice * item.row.goodCount }}
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                width="180"
                label="评分"
                v-if="scope.row.order.status === 2"
              >
                <template slot-scope="item">
                  <el-rate v-model="item.row.rate"></el-rate>
                  <el-input
                    type="textarea"
                    rows="3"
                    v-model="item.row.buyerComment"
                    :disabled="item.row.commentDate !== null"
                    placeholder="文字评价"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                width="50"
                label="操作"
                v-if="scope.row.order.status === 2"
              >
                <template slot-scope="item">
                  <el-button
                    type="text"
                    @click="updateComment(item.row)"
                    v-if="item.row.commentDate === null"
                    >评价</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-button type="text" size="small" slot="reference">查看</el-button>
          </el-popover>

          <el-button
            type="text"
            size="small"
            v-if="scope.row.order.status === 0"
            @click="updateOrder(scope.row, 1)"
            >支付</el-button
          >
          <el-button
            type="text"
            size="small"
            v-else-if="scope.row.order.status === 1"
            @click="updateOrder(scope.row, 2)"
            >确认收货</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { commentsUpdate, OrderListReq, OrderUpdateReq } from "@/api/order";

export default {
  name: "OrderPage",
  data() {
    return {
      orderList: [],
    };
  },
  methods: {
    initData() {
      OrderListReq().then((res) => {
        this.orderList = res;
      });
    },

    updateOrder(row, value) {
      let old = row.order;

      row.order.status = value;
      OrderUpdateReq(row.order)
        .then(() => {
          this.initData();
          this.$message("操作成功");
        })
        .catch((e) => {
          row.order = old;
        });
    },
    updateComment(item) {
      commentsUpdate(item).then(() => {
        this.initData();
        this.$message("评价成功");
      });
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style></style>
